<template>
	<view class="address-page">
		<navgatsVue :navigationMsg="navigationMsg"></navgatsVue>
		<view class="main">
			<view class="addressList">
				<view class="address-item" v-for="(item, index) in addressData" :key="index">
					<view class="top" @click="onyes(index)">
						<view class="left">
							{{ item.name }}
						</view>
						<view class="right">
							{{ item.phone }}
						</view>
					</view>
					<view class="main" @click="onyes(index)">
						<view class="city">
							{{ item.city_text }}
						</view>
						<view class="address">
							{{ item.address }}
						</view>
					</view>
					<view class="tool">
						<view class="left">
							<!-- 	<u-radio-group>
								<u-radio :name="item.default_switch" activeColor="#FCD748" label="默认"
									@click="chengeDefault(item, index)"></u-radio>
							</u-radio-group> -->
						</view>
						<view class="right">
							<view class="del" @click="del(item)">
								删除
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="add_address" @click="addAddress()">
			新增地址+
		</view>
		<u-modal :show="delShow" title="确认删除？" @close="delShow = false" @cancel="delShow = false" @confirm="delects"
			:closeOnClickOverlay="true" :showCancelButton="true" confirmColor="#FCD748"></u-modal>
	</view>
</template>

<script>
	import {
		get_address_list,
		address_del
	} from '../../../api/api';
	import navgatsVue from '../../../common/navgats/navgats.vue';
	export default {
		data() {
			return {
				navigationMsg: {
					bgColor: "#f6f6f6",
					title: "地址"
				},
				addressData: [],
				//删除弹框
				delShow: false,
				delAddressId: ""
			}
		},
		components: {
			navgatsVue
		},
		onShow() {
			this.getAddressList()
		},
		methods: {
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			async getAddressList() {
				let res = await get_address_list()
				if (res.data.code == 1) {
					this.addressData = res.data.data
				}
			},
			//点击删除
			del(item) {
				this.delAddressId = item.id
				this.delShow = true
			},
			//删除
			async delects() {
				this.delShow = false
				let data = {
					address_id: this.delAddressId
				}
				let res = await address_del(data)
				console.log(res)
				this.getAddressList()
			},
			//点击添加地址
			addAddress() {
				uni.navigateTo({
					url: "/pages/mys/addAddress/addAddress"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address-page {
		width: 100vw;
		height: 100vh;
		position: relative;

		.main {
			width: 100%;
			height: calc(100% - 320rpx);
			overflow-y: scroll;
			display: flex;
			flex-direction: column;
			align-items: center;

			.addressList {
				width: 95%;

				.address-item {
					width: 100%;
					margin-top: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					border-radius: 20rpx;
					border: 1px solid #ccc;

					.top {
						width: 90%;
						height: 80rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left {
							font-size: 34rpx;

						}

						.right {
							font-size: 34rpx;
						}
					}

					.main {
						width: 90%;
						border-bottom: 1px solid #ccc;

						.city {
							width: 100%;
							height: 50rpx;
							line-height: 50rpx;
							color: #a2a2a2;
						}

						.address {
							width: 100%;
							margin-bottom: 10rpx;
							color: #a2a2a2;
							word-break: break-all;
						}
					}

					.tool {
						width: 90%;
						height: 100rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left {
							font-size: 40rpx;
						}

						.right {
							display: flex;
							align-items: center;

							.edit {
								margin-right: 30rpx;
								font-size: 24rpx;
							}

							.del {
								margin-right: 30rpx;
								font-size: 24rpx;
								color: red;
							}
						}
					}
				}
			}
		}

		.addBox {
			width: 100vw;
			height: 500rpx;
		}

		.add_address {
			width: 90%;
			height: 100rpx;
			position: absolute;
			left: 5%;
			bottom: 20rpx;
			text-align: center;
			line-height: 100rpx;
			color: #fff;
			border-radius: 50rpx;
			background-color: #FCD748;
			font-size: 32rpx;
		}
	}
</style>